<script>
import {selectDoctorSchedulerInfo} from "@/api/doctor";

export default {
  name: "MyScheduler",
  data(){
    return{
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      doctorSchedulerList:[],
      currentMonth:null,
      value:null,
    }
  },
  created(){
  this.value= this.getCurrentDate();
  this.load();
  },
  methods:{
   load(){
     if(this.currentMonth==null){
       this.currentMonth=this.value.split('-').slice(0,2).join('-');
       console.log(this.currentMonth)
     }
     let params={
       userId:this.user.userId,
       currentMonth:this.currentMonth,
     };
     selectDoctorSchedulerInfo(params).then(res=>{
       if(res.code==200) {
         this.value=this.currentMonth;
         console.log(this.value)
         this.doctorSchedulerList = res.data;
         console.log(this.doctorSchedulerList);
       }
     })
   },
    getCurrentDate(){
      let date=new Date();
      let year=date.getFullYear();
      let month=date.getMonth()+1<10 ?'0'+(date.getMonth()+1):date.getMonth()+1;
      let day=date.getDate()<10 ?'0'+date.getDate():date.getDate();
      return year+'-'+month+'-'+day;
    }
  }
}
</script>

<template>
  <div>
    <div class="search">
      <el-date-picker type="month" v-model="currentMonth" format="yyyy年MM月" value-format="yyyy-MM" placeholder="请选择月份"  clearable></el-date-picker>
      <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
    </div>
  <div style="margin-top: 10px">
  <div class="monthText">{{ value && value.replace(/-/,'年') }}月 排班表</div>
  <el-calendar v-model="value">
    <template slot="dateCell" slot-scope="{date,data}">
      <div v-if="doctorSchedulerList.some(el => el.workDate == data.day)">
        <div style="margin-bottom: 5px;text-align: center">
          {{data.day.split("-").slice(2).join("-")}}✔️
        </div>
        <div v-for="(item,index) in doctorSchedulerList" :key="index">
         <span v-if="item.workDate==data.day">
         <el-tooltip placement="top" effect="light">
         <div slot="content">
         <span v-if="item.dayPart=='0'">排班时段：（{{item.startTime}}-{{item.endTime}}），号源数量：{{item.reservedNumber}}</span>
         <span v-if="item.dayPart=='1'">排班时段：（{{item.startTime}}-{{item.endTime}}），号源数量：{{item.reservedNumber}}</span>
         </div>
         <div>
         <div v-if="item.dayPart=='0'" style="text-align: center;margin-bottom: 5px"><el-tag type="success" size="medium">上午（{{item.startTime}}-{{item.endTime}}）</el-tag></div>
         <div v-if="item.dayPart=='1'" style="text-align: center"><el-tag type="warning" size="medium">下午（{{item.startTime}}-{{item.endTime}}）</el-tag></div>
         </div>
         </el-tooltip>
          </span>
        </div>
      </div>
      <div v-else>
        <div >
          {{data.day.split("-").slice(2).join("-")}}
        </div>
        <div class="no-work-class">
          <div class="icon-class">
            <i class="el-icon-date" />
          </div>
          <div class="tips-class">暂无排班</div>
        </div>
      </div>
    </template>
  </el-calendar>
  </div>
  </div>
</template>

<style scoped>
.is-selected {
  color: #1989FA;
}
.monthText {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  color: #666;
  height: 30px;
  background-color: #FFFFFF;
}

.no-work-class {
  text-align: center;
  color: #cacaca;
}
::v-deep .el-calendar-table thead th {
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
  background-color: #6e77f2;
  color: #FFFFFF;
}
::v-deep .el-calendar__body {
  height: 85vh;
}

::v-deep .el-calendar-table {
  width: 100%;
  height: 100%;
  &:not(.is-range) {
    td.next {
      pointer-events: none;
      display: none;
    }
    td.prev {
      pointer-events: none;
      visibility: hidden;
    }
  }
  td.is-selected {
    background: none !important;
  }
  .prev,
  .next {
    .icon-class,
    .tips-class,
    .edit-color {
      color: #e1e1e1;
    }
  }
  td.is-today {
    .day-class {
      background: #44a2f3;
      width: 50px;
      text-align: center;
      height: 20px;
      border-radius: 4px;
      color: #fff;
      font-weight: 500;
    }
  }
}
  ::v-deep .el-calendar-day {
    height: 100% !important;
    padding: 1px;
  }
  ::v-deep .el-calendar__header {
    display: none;
  }
.icon-class {
  font-size: 20px;
  color: #777;
  margin-bottom: 20px;
}
.tips-class {
  font-size: 14px;
  color: #777;
}
</style>